import React from 'react'
import { Card, Button, Typography } from 'antd'
import { PlusOutlined } from '@ant-design/icons'

const { Text } = Typography

export interface AddSceneCardProps {
  onAdd?: () => void
  loading?: boolean
}

/**
 * 添加场景卡片组件
 * 用于在场景网格中显示添加新场景的按钮
 */
export const AddSceneCard: React.FC<AddSceneCardProps> = ({
  onAdd,
  loading = false
}) => {
  return (
    <Card
      className="add-scene-card"
      variant="borderless"
      style={{
        minHeight: '280px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        border: '2px dashed #d9d9d9',
        backgroundColor: '#fafafa',
        cursor: 'pointer',
        transition: 'all 0.3s ease'
      }}
      onClick={onAdd}
      hoverable
    >
      <div className="add-scene-card__content" style={{ textAlign: 'center' }}>
        <Button
          type="dashed"
          size="large"
          icon={<PlusOutlined />}
          loading={loading}
          style={{
            border: 'none',
            backgroundColor: 'transparent',
            fontSize: '16px',
            height: 'auto',
            padding: '12px 24px'
          }}
        >
          添加场景
        </Button>
        <div style={{ marginTop: '8px' }}>
          <Text type="secondary" style={{ fontSize: '12px' }}>
            点击创建新的分镜场景
          </Text>
        </div>
      </div>
    </Card>
  )
}

export default AddSceneCard